<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      size="small"
      :inline="true"
      v-show="showSearch"
      label-width="130px"
    >
      <el-form-item label="服务商名称" prop="userName">
        <el-input
          v-model="queryParams.userName"
          placeholder="请输入服务商名称"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="服务区域" prop="area">
        <el-input
          v-model="queryParams.area"
          placeholder="请输入服务区域"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="法人银行卡" prop="card">
        <el-input
          v-model="queryParams.card"
          placeholder="请输入法人银行卡"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="门店照片" prop="storeImg">
        <el-input
          v-model="queryParams.storeImg"
          placeholder="请输入门店照片"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="白天调度手机号" prop="dayPhone">
        <el-input
          v-model="queryParams.dayPhone"
          placeholder="请输入白天调度手机号"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="夜间调度手机号" prop="nightPhone">
        <el-input
          v-model="queryParams.nightPhone"
          placeholder="请输入夜间调度手机号"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="营业执照" prop="license">
        <el-input
          v-model="queryParams.license"
          placeholder="请输入营业执照"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="对公账户" prop="account">
        <el-input
          v-model="queryParams.account"
          placeholder="请输入对公账户"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="联系电话" prop="phone">
        <el-input
          v-model="queryParams.phone"
          placeholder="请输入联系电话"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="三吨救援拖车数量" prop="tarilerNum">
        <el-input
          v-model="queryParams.tarilerNum"
          placeholder="请输入三吨救援拖车数量"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="小修车数量" prop="repairNum">
        <el-input
          v-model="queryParams.repairNum"
          placeholder="请输入小修车数量"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>

      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置</el-button
        >
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          >导出</el-button
        >
      </el-col>
      <right-toolbar
        :showSearch.sync="showSearch"
        @queryTable="getList"
      ></right-toolbar>
    </el-row>

    <el-table
      border
      v-loading="loading"
      :data="partnerList"
      @selection-change="handleSelectionChange"
    >
      <el-table-column label="服务商名称" align="center" prop="userName" />
      <el-table-column label="服务区域" align="center" prop="area" />
      <!-- <el-table-column label="法人身份证" align="center" prop="idCard" /> -->
      <!-- <el-table-column label="法人银行卡" align="center" prop="card" /> -->
      <!-- <el-table-column label="门店照片" align="center" prop="storeImg" /> -->
      <el-table-column label="白天调度手机号" align="center" prop="dayPhone" />
      <el-table-column
        label="夜间调度手机号"
        align="center"
        prop="nightPhone"
      />
      <!-- <el-table-column label="营业执照" align="center" prop="license" />
      <el-table-column label="对公账户" align="center" prop="account" /> -->
      <el-table-column align="center" prop="phone">
        <template slot="header">
          <div>
            <div>联系电话</div>
            <div
              style="
                color: #f56c6c;
                font-size: 12px;
                font-weight: bold;
                margin-top: 2px;
              "
            >
              (该手机号为调度端登录账号)
            </div>
          </div>
        </template>
      </el-table-column>
      <!-- <el-table-column label="状态" align="center" prop="status" /> -->
      <el-table-column
        label="三吨救援拖车数量"
        align="center"
        prop="tarilerNum"
      />

      <el-table-column label="小修车数量" align="center" prop="repairNum" />
      <el-table-column label="审核状态" align="center" prop="tarilerNum">
        <template slot-scope="scope">
          <div :class="scope.row.status == 1 ? 'success' : 'danger'">
            {{ scope.row.status == 1 ? "审核通过" : "未审核" }}
          </div>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <!-- <el-button
            v-if="scope.row.status == 0"
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="examine(scope.row)"
           
            >审核通过</el-button
          > -->

          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            >查看</el-button
          >
          <!-- <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['api:partner:remove']"
            >删除</el-button
          > -->
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改服务商申请对话框 -->
    <el-dialog
      :title="title"
      :visible.sync="open"
      width="80%"
      append-to-body
      custom-class="partner-dialog"
    >
      <div class="partner-header">
        <div class="partner-title">
          <i class="el-icon-s-shop"></i>
          <span>服务商：{{ form.userName }}</span>
        </div>
      </div>
      <el-tabs type="border-card" class="custom-tabs">
        <el-tab-pane label="服务商详情">
          <div class="detail-container">
            <el-descriptions class="margin-top" :column="2" border>
              <el-descriptions-item>
                <template slot="label">
                  <div class="description-label">
                    <i class="el-icon-s-shop"></i> 服务商名称
                  </div>
                </template>
                {{ form.userName }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <div class="description-label">
                    <i class="el-icon-location"></i> 服务区域
                  </div>
                </template>
                {{ form.area }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <div class="description-label">
                    <i class="el-icon-postcard"></i> 法人身份证
                  </div>
                </template>
                {{ form.idCard }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <div class="description-label">
                    <i class="el-icon-bank-card"></i> 法人银行卡
                  </div>
                </template>
                {{ form.card }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <div class="description-label">
                    <i class="el-icon-picture"></i> 门店照片
                  </div>
                </template>
                <image-preview :src="form.storeImg" :width="50" :height="50" />
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <div class="description-label">
                    <i class="el-icon-phone"></i> 白天调度手机号
                  </div>
                </template>
                {{ form.dayPhone }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <div class="description-label">
                    <i class="el-icon-phone-outline"></i> 夜间调度手机号
                  </div>
                </template>
                {{ form.nightPhone }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <div class="description-label">
                    <i class="el-icon-document"></i> 营业执照
                  </div>
                </template>
                <image-preview :src="form.license" :width="50" :height="50" />
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <div class="description-label">
                    <i class="el-icon-money"></i> 对公账户
                  </div>
                </template>
                {{ form.account }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <div class="description-label">
                    <i class="el-icon-mobile-phone"></i> 联系电话
                  </div>
                </template>
                {{ form.phone }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <div class="description-label">
                    <i class="el-icon-truck"></i> 三吨救援拖车数量
                  </div>
                </template>
                {{ form.tarilerNum }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <div class="description-label">
                    <i class="el-icon-s-cooperation"></i> 小修车数量
                  </div>
                </template>
                {{ form.repairNum }}
              </el-descriptions-item>
            </el-descriptions>
            <div v-if="form.status == 0" class="audit-section">
              <el-button type="primary" @click="examine" icon="el-icon-check"
                >审核通过</el-button
              >
              <el-button
                type="danger"
                @click="rejectExamine"
                icon="el-icon-close"
                >审批拒绝</el-button
              >
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="服务商下单合同价">
          <div class="contract-price-container">
            <!-- 查询表单 -->
            <el-form
              :model="priceQueryParams"
              ref="priceQueryForm"
              size="small"
              :inline="true"
              v-show="showPriceSearch"
              label-width="100px"
              class="price-search-form"
            >
              <el-form-item label="车型" prop="modelId">
                <el-select
                  v-model="priceQueryParams.modelId"
                  placeholder="请选择车型"
                  clearable
                >
                  <el-option
                    v-for="item in trailerTypeList"
                    :key="item.id"
                    :label="item.trailerTypeName"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="价格类型" prop="priceType">
                <el-select
                  v-model="priceQueryParams.priceType"
                  placeholder="请选择价格类型"
                  clearable
                >
                  <el-option label="平台到服务商" value="PLATFORM_TO_AGENT" />
                  <el-option label="服务商到平台" value="AGENT_TO_PLATFORM" />
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button
                  type="primary"
                  icon="el-icon-search"
                  size="mini"
                  @click="handlePriceQuery"
                  >搜索</el-button
                >
                <el-button
                  icon="el-icon-refresh"
                  size="mini"
                  @click="resetPriceQuery"
                  >重置</el-button
                >
              </el-form-item>
            </el-form>

            <!-- 操作按钮 -->
            <el-row :gutter="10" class="mb8">
              <el-col :span="1.5">
                <el-button
                  type="primary"
                  plain
                  icon="el-icon-plus"
                  size="mini"
                  @click="handleAddPrice"
                  >新增合同价</el-button
                >
              </el-col>
              <el-col :span="1.5">
                <el-button
                  type="success"
                  plain
                  icon="el-icon-edit"
                  size="mini"
                  :disabled="priceSingle"
                  @click="handleUpdatePrice"
                  >修改</el-button
                >
              </el-col>
              <el-col :span="1.5">
                <el-button
                  type="danger"
                  plain
                  icon="el-icon-delete"
                  size="mini"
                  :disabled="priceMultiple"
                  @click="handleDeletePrice"
                  >删除</el-button
                >
              </el-col>
              <right-toolbar
                :showSearch.sync="showPriceSearch"
                @queryTable="getPriceList"
              ></right-toolbar>
            </el-row>

            <!-- 价格列表表格 -->
            <el-table
              border
              v-loading="priceLoading"
              :data="priceList"
              @selection-change="handlePriceSelectionChange"
            >
              <el-table-column label="序号" type="index" align="center" />
              <el-table-column label="车型" align="center" prop="modelId">
                <template slot-scope="scope">
                  {{ getTrailerTypeName(scope.row.modelId) }}
                </template>
              </el-table-column>
              <el-table-column label="价格类型" align="center" prop="priceType">
                <template slot-scope="scope">
                  <el-tag
                    :type="
                      scope.row.priceType === 'PLATFORM_TO_AGENT'
                        ? 'success'
                        : 'warning'
                    "
                  >
                    {{
                      scope.row.priceType === "PLATFORM_TO_AGENT"
                        ? "平台到服务商"
                        : "服务商到平台"
                    }}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column
                label="本地救援起步价"
                align="center"
                prop="localAgentStartingPrice"
              >
                <template slot-scope="scope">
                  {{ scope.row.localAgentStartingPrice }}元
                </template>
              </el-table-column>
              <el-table-column
                label="本地救援起步公里"
                align="center"
                prop="localAgentStartingMileage"
                width="130"
              >
                <template slot-scope="scope">
                  {{ scope.row.localAgentStartingMileage }}km
                </template>
              </el-table-column>
              <el-table-column
                label="本地救援超出单价"
                align="center"
                prop="localAgentUnitPrice"
                width="130"
              >
                <template slot-scope="scope">
                  {{ scope.row.localAgentUnitPrice }}元/km
                </template>
              </el-table-column>
              <el-table-column
                label="顺风车起步价"
                align="center"
                prop="carpoolAgentStartingPrice"
              >
                <template slot-scope="scope">
                  {{ scope.row.carpoolAgentStartingPrice }}元
                </template>
              </el-table-column>
              <el-table-column
                label="顺风车起步公里数"
                align="center"
                prop="carpoolAgentStartingPrice"
              >
                <template slot-scope="scope">
                  {{ scope.row.carpoolAgentStartingMileage }}KM
                </template>
              </el-table-column>

                        <el-table-column
                label="顺风车超公里数单价"
                align="center"
                prop="carpoolAgentStartingPrice"
              >
                <template slot-scope="scope">
                  {{ scope.row.carpoolAgentUnitPrice }}元
                </template>
              </el-table-column>
              <el-table-column
                label="生效日期"
                align="center"
                prop="effectiveDate"
              >
                <template slot-scope="scope">
                  <span>{{ scope.row.effectiveDate }}</span>
                </template>
              </el-table-column>
              <el-table-column
                label="失效日期"
                align="center"
                prop="expiryDate"
              >
                <template slot-scope="scope">
                  <span>{{ scope.row.expiryDate }}</span>
                </template>
              </el-table-column>
              <el-table-column
                label="操作"
                align="center"
                class-name="small-padding fixed-width"
              >
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="text"
                    icon="el-icon-view"
                    @click="handleViewPrice(scope.row)"
                    >查看</el-button
                  >
                  <el-button
                    size="mini"
                    type="text"
                    icon="el-icon-edit"
                    @click="handleUpdatePrice(scope.row)"
                    >修改</el-button
                  >
                  <el-button
                    size="mini"
                    type="text"
                    icon="el-icon-delete"
                    @click="handleDeletePrice(scope.row)"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>

            <!-- 分页 -->
            <pagination
              v-show="priceTotal > 0"
              :total="priceTotal"
              :page.sync="priceQueryParams.pageNum"
              :limit.sync="priceQueryParams.pageSize"
              @pagination="getPriceList"
            />
          </div>
        </el-tab-pane>
      </el-tabs>

      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel" icon="el-icon-close">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 添加或修改合同价格对话框 -->
    <el-dialog
      :title="priceTitle"
      :visible.sync="priceOpen"
      width="900px"
      append-to-body
      custom-class="price-dialog"
    >
      <!-- 价格类型Tab切换 -->
      <el-tabs
        v-model="activePriceType"
        type="border-card"
        class="price-type-tabs"
        @tab-click="handlePriceTypeChange"
      >
        <el-tab-pane label="平台给服务商" name="PLATFORM_TO_AGENT">
          <template slot="label">
            <span class="custom-tab-label">
              <i class="el-icon-s-platform"></i>
              平台给服务商
            </span>
          </template>
          <!-- 平台给服务商的表单内容 -->
          <div class="tab-content">
            <el-form
              ref="priceForm"
              :model="priceForm"
              :rules="priceRules"
              label-width="130px"
              class="price-form-container"
            >
              <!-- 基础信息 -->
              <div class="basic-info-section">
                <div class="section-header-wrapper">
                  <div class="section-header-line">
                    <span class="section-title">
                      <i class="el-icon-setting"></i> 基础信息
                    </span>
                  </div>
                </div>
                <div class="section-content">
                  <el-row :gutter="30">
                    <el-col :span="24">
                      <el-form-item label="车型" prop="modelId">
                        <el-select
                          v-model="priceForm.modelId"
                          placeholder="请选择车型"
                          :disabled="priceFormType === 'view'"
                          style="width: 50%"
                        >
                          <el-option
                            v-for="item in trailerTypeList"
                            :key="item.id"
                            :label="item.trailerTypeName"
                            :value="item.id"
                          />
                        </el-select>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </div>
              </div>

              <!-- 价格配置区域 -->
              <div class="price-config-section">
                <el-row :gutter="30">
                  <!-- 左侧：本地救援价格 -->
                  <el-col :span="12">
                    <div class="price-module local-module">
                      <div class="module-header local-header">
                        <i class="el-icon-location-outline"></i>
                        <span class="module-title">本地救援价格</span>
                      </div>
                      <div class="module-content">
                        <el-form-item
                          label="起步价格"
                          prop="localAgentStartingPrice"
                        >
                          <div class="input-with-unit">
                            <el-input-number
                              v-model="priceForm.localAgentStartingPrice"
                              :precision="2"
                              :step="1"
                              :max="10000"
                              :min="0"
                              placeholder="请输入起步价格"
                              :disabled="priceFormType === 'view'"
                              style="width: 100%"
                              controls-position="right"
                            />
                            <span class="unit-label">元</span>
                          </div>
                        </el-form-item>

                        <el-form-item
                          label="起步公里数"
                          prop="localAgentStartingMileage"
                        >
                          <div class="input-with-unit">
                            <el-input-number
                              v-model="priceForm.localAgentStartingMileage"
                              :precision="1"
                              :step="1"
                              :max="1000"
                              :min="0"
                              placeholder="请输入起步公里数"
                              :disabled="priceFormType === 'view'"
                              style="width: 100%"
                              controls-position="right"
                            />
                            <span class="unit-label">km</span>
                          </div>
                        </el-form-item>

                        <el-form-item
                          label="超出单价"
                          prop="localAgentUnitPrice"
                        >
                          <div class="input-with-unit">
                            <el-input-number
                              v-model="priceForm.localAgentUnitPrice"
                              :precision="2"
                              :step="1"
                              :max="1000"
                              :min="0"
                              placeholder="请输入超出单价"
                              :disabled="priceFormType === 'view'"
                              style="width: 100%"
                              controls-position="right"
                            />
                            <span class="unit-label">元/km</span>
                          </div>
                        </el-form-item>
                      </div>
                    </div>
                  </el-col>

                  <!-- 右侧：顺风车价格 -->
                  <el-col :span="12">
                    <div class="price-module carpool-module">
                      <div class="module-header carpool-header">
                        <i class="el-icon-truck"></i>
                        <span class="module-title">顺风车价格</span>
                      </div>
                      <div class="module-content">
                        <el-form-item
                          label="起步价格"
                          prop="carpoolAgentStartingPrice"
                        >
                          <div class="input-with-unit">
                            <el-input-number
                              v-model="priceForm.carpoolAgentStartingPrice"
                              :precision="2"
                              :step="1"
                              :max="10000"
                              :min="0"
                              placeholder="请输入起步价格"
                              :disabled="priceFormType === 'view'"
                              style="width: 100%"
                              controls-position="right"
                            />
                            <span class="unit-label">元</span>
                          </div>
                        </el-form-item>

                        <el-form-item
                          label="起步公里数"
                          prop="carpoolAgentStartingMileage"
                        >
                          <div class="input-with-unit">
                            <el-input-number
                              v-model="priceForm.carpoolAgentStartingMileage"
                              :precision="1"
                              :step="1"
                              :max="1000"
                              :min="0"
                              placeholder="请输入起步公里数"
                              :disabled="priceFormType === 'view'"
                              style="width: 100%"
                              controls-position="right"
                            />
                            <span class="unit-label">km</span>
                          </div>
                        </el-form-item>

                        <el-form-item
                          label="超出单价"
                          prop="carpoolAgentUnitPrice"
                        >
                          <div class="input-with-unit">
                            <el-input-number
                              v-model="priceForm.carpoolAgentUnitPrice"
                              :precision="2"
                              :step="1"
                              :max="1000"
                              :min="0"
                              placeholder="请输入超出单价"
                              :disabled="priceFormType === 'view'"
                              style="width: 100%"
                              controls-position="right"
                            />
                            <span class="unit-label">元/km</span>
                          </div>
                        </el-form-item>
                      </div>
                    </div>
                  </el-col>
                </el-row>
              </div>

              <!-- 有效期设置 -->
              <div class="date-section">
                <div class="section-header-wrapper">
                  <div class="section-header-line">
                    <span class="section-title date-title">
                      <i class="el-icon-date"></i> 有效期设置
                    </span>
                  </div>
                </div>
                <div class="section-content">
                  <el-row :gutter="30">
                    <el-col :span="12">
                      <el-form-item label="生效日期" prop="effectiveDate">
                        <el-date-picker
                          v-model="priceForm.effectiveDate"
                          type="date"
                          placeholder="请选择生效日期"
                          value-format="yyyy-MM-dd"
                          :disabled="priceFormType === 'view'"
                          style="width: 100%"
                        />
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="失效日期" prop="expiryDate">
                        <el-date-picker
                          v-model="priceForm.expiryDate"
                          type="date"
                          placeholder="请选择失效日期"
                          value-format="yyyy-MM-dd"
                          :disabled="priceFormType === 'view'"
                          style="width: 100%"
                        />
                      </el-form-item>
                    </el-col>
                  </el-row>
                </div>
              </div>
            </el-form>
          </div>
        </el-tab-pane>

        <el-tab-pane label="服务商给平台" name="AGENT_TO_PLATFORM">
          <template slot="label">
            <span class="custom-tab-label">
              <i class="el-icon-s-shop"></i>
              服务商给平台
            </span>
          </template>
          <!-- 服务商给平台的表单内容（复用相同的表单） -->
          <div class="tab-content">
            <el-form
              ref="priceForm"
              :model="priceForm"
              :rules="priceRules"
              label-width="130px"
              class="price-form-container"
            >
              <!-- 基础信息 -->
              <div class="basic-info-section">
                <div class="section-header-wrapper">
                  <div class="section-header-line">
                    <span class="section-title">
                      <i class="el-icon-setting"></i> 基础信息
                    </span>
                  </div>
                </div>
                <div class="section-content">
                  <el-row :gutter="30">
                    <el-col :span="24">
                      <el-form-item label="车型" prop="modelId">
                        <el-select
                          v-model="priceForm.modelId"
                          placeholder="请选择车型"
                          :disabled="priceFormType === 'view'"
                          style="width: 50%"
                        >
                          <el-option
                            v-for="item in trailerTypeList"
                            :key="item.id"
                            :label="item.trailerTypeName"
                            :value="item.id"
                          />
                        </el-select>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </div>
              </div>

              <!-- 价格配置区域 -->
              <div class="price-config-section">
                <el-row :gutter="30">
                  <!-- 左侧：本地救援价格 -->
                  <el-col :span="12">
                    <div class="price-module local-module">
                      <div class="module-header local-header">
                        <i class="el-icon-location-outline"></i>
                        <span class="module-title">本地救援价格</span>
                      </div>
                      <div class="module-content">
                        <el-form-item
                          label="起步价格"
                          prop="localAgentStartingPrice"
                        >
                          <div class="input-with-unit">
                            <el-input-number
                              v-model="priceForm.localAgentStartingPrice"
                              :precision="2"
                              :step="1"
                              :max="10000"
                              :min="0"
                              placeholder="请输入起步价格"
                              :disabled="priceFormType === 'view'"
                              style="width: 100%"
                              controls-position="right"
                            />
                            <span class="unit-label">元</span>
                          </div>
                        </el-form-item>

                        <el-form-item
                          label="起步公里数"
                          prop="localAgentStartingMileage"
                        >
                          <div class="input-with-unit">
                            <el-input-number
                              v-model="priceForm.localAgentStartingMileage"
                              :precision="1"
                              :step="1"
                              :max="1000"
                              :min="0"
                              placeholder="请输入起步公里数"
                              :disabled="priceFormType === 'view'"
                              style="width: 100%"
                              controls-position="right"
                            />
                            <span class="unit-label">km</span>
                          </div>
                        </el-form-item>

                        <el-form-item
                          label="超出单价"
                          prop="localAgentUnitPrice"
                        >
                          <div class="input-with-unit">
                            <el-input-number
                              v-model="priceForm.localAgentUnitPrice"
                              :precision="2"
                              :step="1"
                              :max="1000"
                              :min="0"
                              placeholder="请输入超出单价"
                              :disabled="priceFormType === 'view'"
                              style="width: 100%"
                              controls-position="right"
                            />
                            <span class="unit-label">元/km</span>
                          </div>
                        </el-form-item>
                      </div>
                    </div>
                  </el-col>

                  <!-- 右侧：顺风车价格 -->
                  <el-col :span="12">
                    <div class="price-module carpool-module">
                      <div class="module-header carpool-header">
                        <i class="el-icon-truck"></i>
                        <span class="module-title">顺风车价格</span>
                      </div>
                      <div class="module-content">
                        <el-form-item
                          label="起步价格"
                          prop="carpoolAgentStartingPrice"
                        >
                          <div class="input-with-unit">
                            <el-input-number
                              v-model="priceForm.carpoolAgentStartingPrice"
                              :precision="2"
                              :step="1"
                              :max="10000"
                              :min="0"
                              placeholder="请输入起步价格"
                              :disabled="priceFormType === 'view'"
                              style="width: 100%"
                              controls-position="right"
                            />
                            <span class="unit-label">元</span>
                          </div>
                        </el-form-item>

                        <el-form-item
                          label="起步公里数"
                          prop="carpoolAgentStartingMileage"
                        >
                          <div class="input-with-unit">
                            <el-input-number
                              v-model="priceForm.carpoolAgentStartingMileage"
                              :precision="1"
                              :step="1"
                              :max="1000"
                              :min="0"
                              placeholder="请输入起步公里数"
                              :disabled="priceFormType === 'view'"
                              style="width: 100%"
                              controls-position="right"
                            />
                            <span class="unit-label">km</span>
                          </div>
                        </el-form-item>

                        <el-form-item
                          label="超出单价"
                          prop="carpoolAgentUnitPrice"
                        >
                          <div class="input-with-unit">
                            <el-input-number
                              v-model="priceForm.carpoolAgentUnitPrice"
                              :precision="2"
                              :step="1"
                              :max="1000"
                              :min="0"
                              placeholder="请输入超出单价"
                              :disabled="priceFormType === 'view'"
                              style="width: 100%"
                              controls-position="right"
                            />
                            <span class="unit-label">元/km</span>
                          </div>
                        </el-form-item>
                      </div>
                    </div>
                  </el-col>
                </el-row>
              </div>

              <!-- 有效期设置 -->
              <div class="date-section">
                <div class="section-header-wrapper">
                  <div class="section-header-line">
                    <span class="section-title date-title">
                      <i class="el-icon-date"></i> 有效期设置
                    </span>
                  </div>
                </div>
                <div class="section-content">
                  <el-row :gutter="30">
                    <el-col :span="12">
                      <el-form-item label="生效日期" prop="effectiveDate">
                        <el-date-picker
                          v-model="priceForm.effectiveDate"
                          type="date"
                          placeholder="请选择生效日期"
                          value-format="yyyy-MM-dd"
                          :disabled="priceFormType === 'view'"
                          style="width: 100%"
                        />
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="失效日期" prop="expiryDate">
                        <el-date-picker
                          v-model="priceForm.expiryDate"
                          type="date"
                          placeholder="请选择失效日期"
                          value-format="yyyy-MM-dd"
                          :disabled="priceFormType === 'view'"
                          style="width: 100%"
                        />
                      </el-form-item>
                    </el-col>
                  </el-row>
                </div>
              </div>
            </el-form>
          </div>
        </el-tab-pane>
      </el-tabs>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelPrice" icon="el-icon-close">取 消</el-button>
        <el-button
          v-if="priceFormType !== 'view'"
          type="primary"
          @click="submitPriceForm"
          icon="el-icon-check"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  listPartner,
  getPartner,
  delPartner,
  addPartner,
  updatePartner,
  platformInfo,
  approval,
  addservice,
  reject,
} from "@/api/api/partner";
import { listTrailers, listPlateType, getChargeType } from "@/api/api/charge";
import {
  listPlatformAgentPrice,
  getPlatformAgentPrice,
  addPlatformAgentPrice,
  updatePlatformAgentPrice,
  delPlatformAgentPrice,
} from "@/api/api/platformAgentPrice";
import { queryPlatformTrailerType } from "@/api/service/cost";
export default {
  name: "Partner",
  data() {
    return {
      rowInfo: {},
      carTypeList: [],
      serviceChargeVO: {
        serviceCharge: {
          createBy: "",
          createTime: "",
          expressOutPrice: 0,
          expressStartDistance: 0,
          expressStartPrice: 0,
          id: 0,
          outPrice: 0,
          params: {},
          remark: "",
          startDistance: 0,
          startPrice: 0,
          trailerTypeId: 0,
          type: 0,
          updateBy: "",
          updateTime: "",
          userId: 0,
        },
        serviceCommission: {
          createBy: "",
          createTime: "",
          driverCommission: 0,
          driverCommissionType: 0,
          expressDriverCommission: 0,
          expressDriverCommissionType: 0,
          id: 0,
          params: {},
          remark: "",
          trailerTypeId: 0,
          updateBy: "",
          updateTime: "",
          userId: 0,
        },
        typeId: "",
        typeName: "",
        userCharge: {
          createBy: "",
          createTime: "",
          expressOutPrice: 0,
          expressStartDistance: 0,
          expressStartPrice: 0,
          id: 0,
          outPrice: 0,
          params: {},
          remark: "",
          startDistance: 0,
          startPrice: 0,
          trailerTypeId: 0,
          type: 0,
          updateBy: "",
          updateTime: "",
          userId: 0,
        },
        userId: 0,
      },
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 服务商申请表格数据
      partnerList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        userName: null,
        area: null,
        idCard: null,
        card: null,
        storeImg: null,
        dayPhone: null,
        nightPhone: null,
        license: null,
        account: null,
        phone: null,
        status: null,
        tarilerNum: null,
        repairNum: null,
        openId: null,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        status: [
          { required: true, message: "状态不能为空", trigger: "change" },
        ],
      },
      // 合同价格相关数据
      showPriceSearch: true,
      priceLoading: false,
      priceList: [],
      priceTotal: 0,
      priceOpen: false,
      priceTitle: "",
      priceFormType: "", // add, edit, view
      priceSingle: true,
      priceMultiple: true,
      priceIds: [],
      trailerTypeList: [], // 车型列表
      activePriceType: "PLATFORM_TO_AGENT", // 当前激活的价格类型tab
      priceQueryParams: {
        pageNum: 1,
        pageSize: 10,
        modelId: null,
        priceType: null,
        agentId: null,
      },
      priceForm: {},
      priceRules: {
        modelId: [
          { required: true, message: "车型不能为空", trigger: "change" },
        ],
        localAgentStartingPrice: [
          {
            required: true,
            message: "本地救援起步价格不能为空",
            trigger: "blur",
          },
        ],
        localAgentStartingMileage: [
          {
            required: true,
            message: "本地救援起步公里数不能为空",
            trigger: "blur",
          },
        ],
        localAgentUnitPrice: [
          {
            required: true,
            message: "本地救援超出单价不能为空",
            trigger: "blur",
          },
        ],
        carpoolAgentStartingPrice: [
          {
            required: true,
            message: "顺风车起步价格不能为空",
            trigger: "blur",
          },
        ],
        carpoolAgentStartingMileage: [
          {
            required: true,
            message: "顺风车起步公里数不能为空",
            trigger: "blur",
          },
        ],
        carpoolAgentUnitPrice: [
          {
            required: true,
            message: "顺风车超出单价不能为空",
            trigger: "blur",
          },
        ],
        effectiveDate: [
          { required: true, message: "生效日期不能为空", trigger: "change" },
        ],
        expiryDate: [
          { required: true, message: "失效日期不能为空", trigger: "change" },
        ],
      },
    };
  },
  created() {
    this.getList();
    this.getTrailerTypeList();
  },
  methods: {
    /** 获取车型列表 */
    getTrailerTypeList() {
      queryPlatformTrailerType({}).then((response) => {
        this.trailerTypeList = response.data || response.rows || [];
      });
    },

    /** 根据车型ID获取车型名称 */
    getTrailerTypeName(modelId) {
      const trailerType = this.trailerTypeList.find(
        (item) => item.id === modelId
      );
      return trailerType ? trailerType.trailerTypeName : "未知车型";
    },
    /** 查询服务商申请列表 */
    getList() {
      this.loading = true;
      listPartner(this.queryParams).then((response) => {
        this.partnerList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    change(val) {
      let params = {
        id: val,
        userId: this.rowInfo.userId,
      };
      getChargeType(params).then((res) => {
        // this.serviceChargeVO = res.data;
        console.log(this.serviceChargeVO, "ssssssssss");
        this.serviceChargeVO = res.data;
      });
    },
    // 表单重置
    reset() {
      this.serviceChargeVO = {
        serviceCharge: {
          createBy: "",
          createTime: "",
          expressOutPrice: 0,
          expressStartDistance: 0,
          expressStartPrice: 0,
          id: 0,
          outPrice: 0,
          params: {},
          remark: "",
          startDistance: 0,
          startPrice: 0,
          trailerTypeId: 0,
          type: 0,
          updateBy: "",
          updateTime: "",
          userId: 0,
        },
        serviceCommission: {
          createBy: "",
          createTime: "",
          driverCommission: 0,
          driverCommissionType: 0,
          expressDriverCommission: 0,
          expressDriverCommissionType: 0,
          id: 0,
          params: {},
          remark: "",
          trailerTypeId: 0,
          updateBy: "",
          updateTime: "",
          userId: 0,
        },
        typeId: "",
        typeName: "",
        userCharge: {
          createBy: "",
          createTime: "",
          expressOutPrice: 0,
          expressStartDistance: 0,
          expressStartPrice: 0,
          id: 0,
          outPrice: 0,
          params: {},
          remark: "",
          startDistance: 0,
          startPrice: 0,
          trailerTypeId: 0,
          type: 0,
          updateBy: "",
          updateTime: "",
          userId: 0,
        },
        userId: 0,
      };
      this.form = {
        id: null,
        userName: null,
        area: null,
        idCard: null,
        card: null,
        storeImg: null,
        dayPhone: null,
        nightPhone: null,
        license: null,
        account: null,
        phone: null,
        status: null,
        tarilerNum: null,
        repairNum: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        remark: null,
        openId: null,
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.id);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加服务商申请";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      this.rowInfo = row;
      getPartner(row.id).then((response) => {
        this.form = response.data;
        this.open = true;
        this.title = "服务商配置";
        // 加载合同价格列表
        this.getPriceList();
      });
    },
    examine() {
      this.loading = true;
      approval({ id: this.rowInfo.id, approvalType: "1" })
        .then((res) => {
          this.$modal.msgSuccess("审核通过成功");
          this.open = false;
          this.getList();
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },
    /** 提交按钮 */
    submitForm() {
      addservice(this.serviceChargeVO).then((response) => {
        this.$modal.msgSuccess("修改成功");
        this.open = false;
        this.getList();
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$modal
        .confirm('是否确认删除服务商申请编号为"' + ids + '"的数据项？')
        .then(function () {
          return delPartner(ids);
        })
        .then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        })
        .catch(() => {});
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download(
        "api/partner/export",
        {
          ...this.queryParams,
        },
        `partner_${new Date().getTime()}.xlsx`
      );
    },
    rejectExamine() {
      this.$modal
        .confirm("确认拒绝该服务商的申请吗?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
        .then(() => {
          this.loading = true;
          approval({ id: this.rowInfo.id, approvalType: 2 })
            .then((res) => {
              this.$modal.msgSuccess("拒绝审核成功");
              this.open = false;
              this.getList();
              this.loading = false;
            })
            .catch(() => {
              this.loading = false;
            });
        })
        .catch(() => {});
    },

    // 合同价格相关方法
    /** 查询合同价格列表 */
    getPriceList() {
      this.priceLoading = true;
      // 设置当前服务商ID
      this.priceQueryParams.agentId = this.rowInfo?.id || null;

      listPlatformAgentPrice(this.priceQueryParams)
        .then((response) => {
          this.priceList = response.rows || [];
          this.priceTotal = response.total || 0;
          this.priceLoading = false;
        })
        .catch(() => {
          this.priceLoading = false;
        });
    },

    /** 合同价格搜索按钮操作 */
    handlePriceQuery() {
      this.priceQueryParams.pageNum = 1;
      this.getPriceList();
    },

    /** 合同价格重置按钮操作 */
    resetPriceQuery() {
      this.priceQueryParams = {
        pageNum: 1,
        pageSize: 10,
        modelId: null,
        priceType: null,
        agentId: this.rowInfo?.userId || null,
      };
      this.resetForm("priceQueryForm");
      this.handlePriceQuery();
    },

    /** 合同价格多选框选中数据 */
    handlePriceSelectionChange(selection) {
      this.priceIds = selection.map((item) => item.id);
      this.priceSingle = selection.length !== 1;
      this.priceMultiple = !selection.length;
    },

    /** 新增合同价格按钮操作 */
    handleAddPrice() {
      this.resetPriceForm();
      this.priceOpen = true;
      this.priceTitle = "添加合同价格";
      this.priceFormType = "add";
      this.activePriceType = "PLATFORM_TO_AGENT"; // 默认选择平台给服务商
    },

    /** 修改合同价格按钮操作 */
    handleUpdatePrice(row) {
      this.resetPriceForm();
      const id = row.id || this.priceIds[0];
      getPlatformAgentPrice(id).then((response) => {
        this.priceForm = response.data;
        this.activePriceType = response.data.priceType || "PLATFORM_TO_AGENT"; // 设置对应的tab
        this.priceOpen = true;
        this.priceTitle = "修改合同价格";
        this.priceFormType = "edit";
      });
    },

    /** 查看合同价格 */
    handleViewPrice(row) {
      this.resetPriceForm();
      getPlatformAgentPrice(row.id).then((response) => {
        this.priceForm = response.data;
        this.activePriceType = response.data.priceType || "PLATFORM_TO_AGENT"; // 设置对应的tab
        this.priceOpen = true;
        this.priceTitle = "查看合同价格";
        this.priceFormType = "view";
      });
    },

    /** 价格类型tab切换处理 */
    handlePriceTypeChange(tab) {
      this.priceForm.priceType = tab.name;
    },

    /** 提交合同价格表单 */
    submitPriceForm() {
      this.$refs["priceForm"].validate((valid) => {
        if (valid) {
          // 设置服务商ID和价格类型
          this.priceForm.agentId = this.rowInfo.id;
          this.priceForm.priceType = this.activePriceType;

          if (this.priceFormType === "add") {
            addPlatformAgentPrice(this.priceForm).then((response) => {
              this.$modal.msgSuccess("新增成功");
              this.priceOpen = false;
              this.getPriceList();
            });
          } else if (this.priceFormType === "edit") {
            updatePlatformAgentPrice(this.priceForm).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.priceOpen = false;
              this.getPriceList();
            });
          }
        }
      });
    },

    /** 删除合同价格 */
    handleDeletePrice(row) {
      const ids = row.id || this.priceIds;
      this.$modal
        .confirm('是否确认删除合同价格编号为"' + ids + '"的数据项？')
        .then(function () {
          return delPlatformAgentPrice(ids);
        })
        .then(() => {
          this.getPriceList();
          this.$modal.msgSuccess("删除成功");
        })
        .catch(() => {});
    },

    /** 取消合同价格按钮 */
    cancelPrice() {
      this.priceOpen = false;
      this.resetPriceForm();
    },

    /** 合同价格表单重置 */
    resetPriceForm() {
      this.priceForm = {
        id: null,
        agentId: null,
        modelId: null,
        priceType: "PLATFORM_TO_AGENT",
        localAgentStartingMileage: 0,
        localAgentStartingPrice: 0,
        localAgentUnitPrice: 0,
        carpoolAgentStartingMileage: 0,
        carpoolAgentStartingPrice: 0,
        carpoolAgentUnitPrice: 0,
        effectiveDate: null,
        expiryDate: null,
      };
      this.activePriceType = "PLATFORM_TO_AGENT"; // 重置tab到默认值
      this.resetForm("priceForm");
    },
  },
};
</script>

<style scoped>
.partner-dialog {
  border-radius: 8px;
}

.partner-header {
  margin-bottom: 15px;
}

.partner-title {
  font-size: 24px;
  font-weight: bold;
  color: #409eff;
  display: flex;
  align-items: center;
}

.partner-title i {
  margin-right: 10px;
  font-size: 28px;
}

.partner-form {
  padding: 0 15px;
}

.form-container {
  margin-bottom: 15px;
}

.custom-tabs {
  margin-top: 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 4px;
}

.price-section {
  background-color: #f9fafc;
  padding: 15px;
  border-radius: 8px;
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.03);
  margin-bottom: 15px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  height: 100%;
}

.price-section:hover {
  box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.08);
}

.section-header {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  font-size: 16px;
  font-weight: 600;
  color: #ffffff;
  padding: 8px 15px;
  border-radius: 4px;
}

.customer-header {
  background: linear-gradient(135deg, #ff4500 0%, #ff7e54 100%);
}

.express-header {
  background: linear-gradient(135deg, #3498db 0%, #64b5f6 100%);
}

.agent-header {
  background: linear-gradient(135deg, #ff4500 0%, #ff7e54 100%);
}

.express-agent-header {
  background: linear-gradient(135deg, #3498db 0%, #64b5f6 100%);
}

.driver-header {
  background: linear-gradient(135deg, #e6a23c 0%, #f3d19e 100%);
}

.express-driver-header {
  background: linear-gradient(135deg, #e6a23c 0%, #f3d19e 100%);
}

.section-header i {
  margin-right: 8px;
  color: #ffffff;
  font-size: 18px;
}

.price-row {
  margin-bottom: 20px;
}

.compact-form-items .el-form-item {
  margin-bottom: 10px;
}

.compact-form-items .el-form-item:last-child {
  margin-bottom: 0;
}

.divider-title {
  font-size: 18px;
  font-weight: bold;
  color: #409eff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.el-divider {
  margin: 20px 0;
}

.unit-suffix {
  display: inline-block;
  margin-left: 5px;
  width: 30px;
  color: #909399;
  font-size: 12px;
  line-height: 36px;
  white-space: nowrap;
  text-align: left;
}

.input-with-unit {
  display: flex;
  align-items: center;
  width: 100%;
}

.full-width-input {
  width: 100%;
}

.el-input-number.full-width-input.is-controls-right {
  padding-right: 0 !important;
  width: calc(100% - 35px) !important;
}

.form-item-large {
  width: 300px;
}

.submit-section {
  text-align: center;
  margin-top: 30px;
  padding: 10px 0;
}

.dialog-footer {
  text-align: center;
  padding-top: 10px;
}

.detail-container {
  padding: 15px;
}

.description-label {
  display: flex;
  align-items: center;
}

.description-label i {
  margin-right: 5px;
  color: #409eff;
}

.audit-section {
  text-align: center;
  margin-top: 30px;
  padding: 10px 0;
}

.bd {
  color: #ffffff;
  font-weight: bold;
}

.sf {
  color: #ffffff;
  font-weight: bold;
}

.success {
  color: #67c23a;
  font-weight: bold;
}

.danger {
  color: #f56c6c;
  font-weight: bold;
}

.contract-price-container {
  padding: 20px;
  background-color: #fafafa;
  border-radius: 4px;
  margin-top: 10px;
}

.price-search-form {
  background-color: #ffffff;
  padding: 15px;
  border-radius: 4px;
  margin-bottom: 15px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* 合同价格弹窗样式 */
.price-dialog {
  border-radius: 8px;
}

.price-form-container {
  padding: 0 10px;
}

.basic-info-section,
.price-config-section,
.date-section {
  margin-bottom: 25px;
}

.section-title {
  font-size: 16px;
  font-weight: 600;
  color: #409eff;
  display: flex;
  align-items: center;
}

.section-title i {
  margin-right: 8px;
  font-size: 18px;
}

/* 价格模块样式 */
.price-module {
  background-color: #fafbfc;
  border-radius: 8px;
  border: 1px solid #e4e7ed;
  overflow: hidden;
  height: 100%;
  transition: all 0.3s ease;
}

.price-module:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.module-header {
  padding: 15px 20px;
  color: #ffffff;
  font-weight: 600;
  display: flex;
  align-items: center;
  position: relative;
}

.local-header {
  background: linear-gradient(135deg, #67c23a 0%, #85ce61 100%);
}

.carpool-header {
  background: linear-gradient(135deg, #e6a23c 0%, #f7ba2a 100%);
}

.module-header i {
  margin-right: 8px;
  font-size: 18px;
}

.module-title {
  font-size: 16px;
}

.module-content {
  padding: 20px;
}

.module-content .el-form-item {
  margin-bottom: 20px;
}

.module-content .el-form-item:last-child {
  margin-bottom: 0;
}

.date-title {
  color: #909399;
}

/* Tab样式 */
.price-type-tabs {
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.custom-tab-label {
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: 600;
}

.custom-tab-label i {
  margin-right: 6px;
  font-size: 16px;
}

.price-type-tabs .el-tabs__header {
  margin: 0;
}

.price-type-tabs .el-tabs__content {
  padding: 20px;
}

.tab-content {
  background-color: #fafbfc;
  border-radius: 6px;
  padding: 15px;
}

.price-type-tabs .el-tabs__item {
  height: 50px;
  line-height: 50px;
  font-size: 14px;
  font-weight: 600;
}

.price-type-tabs .el-tabs__item.is-active {
  color: #409eff;
}

.price-type-tabs .el-tabs__item:hover {
  color: #409eff;
}

.input-with-unit {
  display: flex;
  align-items: center;
  width: 100%;
}

.unit-label {
  margin-left: 8px;
  color: #909399;
  font-size: 14px;
  white-space: nowrap;
  min-width: 40px;
}

/* 表单项标签样式优化 */
.module-content .el-form-item__label {
  color: #303133;
  font-weight: 600;
}

/* 输入框样式优化 */
.module-content .el-input-number {
  border-radius: 4px;
}

.module-content .el-input-number .el-input__inner {
  border-color: #dcdfe6;
  transition: border-color 0.3s ease;
}

.module-content .el-input-number:hover .el-input__inner {
  border-color: #c0c4cc;
}

.module-content .el-input-number.is-focus .el-input__inner {
  border-color: #409eff;
}

/* 价格配置区域整体样式 */
.price-config-section {
  background-color: #f5f7fa;
  padding: 20px;
  border-radius: 8px;
  border: 1px solid #e4e7ed;
}

/* 统一的节标题样式 */
.section-header-wrapper {
  margin-bottom: 20px;
}

.section-header-line {
  padding: 12px 0;
  border-bottom: 2px solid #e4e7ed;
  position: relative;
}

.section-header-line::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 50px;
  height: 2px;
  background: linear-gradient(90deg, #409eff, #67c23a);
  border-radius: 1px;
}

.section-content {
  padding: 10px 0;
}

.date-title {
  color: #909399;
}
</style>
